<template>
  <div class="padding-lr20 rem-32px">
    <div
      class="flex justify-between line-height-100 border-bottom"
      v-for="(item,index) in expose"
      :key="index"
      @click="to(item)"
    >
      <div>
        {{item.title}}
        <span style="color: red;">{{item.is_notnull==1?'*':''}}</span>
      </div>
      <div class="flex c-66 all_r">
        <span
          class="text-cut-one"
          v-if="item.name == 'area_name' && cityList.length > 2"
        >{{cityList.join(',')}}</span>
        <span
          class="text-cut-one"
          v-if="item.name != 'area_name'"
          v-html="item.value"
        >{{item.value}}</span>
        <i class="iconfont icon-you-copy"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      expose: "",
      data: 0,
      cityList: []
    };
  },
  mounted() {
    document.querySelector("html").style.backgroundColor = "#ffffff";
    this.getIndex();
  },
  methods: {
    setSex() {
      for (let i in this.expose) {
        for (let j in this.expose[i].label_yiji) {
          if (this.expose[i].label_yiji[j].id == this.expose[i].value) {
            this.expose[i].value = this.expose[i].label_yiji[j].title;
          }
        }
      }
    },
    // 城市匹配文字
    setCity() {
      for (let i in this.expose) {
        if (this.expose[i].name == "area_name") {
          let id = this.expose[i].value.split(",");
          for (let j in id) {
            if (id[j] != undefined) {
              this.$axios
                .post("/common/getRegion", {
                  id: j == 0 ? 0 : id[j - 1]
                })
                .then(res => {
                  let data = res.data.data;
                  for (let c in data) {
                    if (data[c].id == id[j]) {
                      this.$set(this.cityList, j, data[c].name);
                    }
                  }
                });
            }
          }
        }
      }
    },
    // 获取数据
    getIndex() {
      var that = this;
      let url = this.$route.query.ajax
        ? this.$route.query.ajax
        : "/wap/personal/card";
      this.$axios
        .post(url, {
          token: window.localStorage.getItem("token"),
          type: 1
        })
        .then(res => {
          let data = res.data.data;
          let expose = [];
          for (let i in data.user) {
            for (let j in data.fields) {
              if (i == data.fields[j].field_name) {
                expose.push({
                  title: data.fields[j].c_name,
                  value: data.user[i],
                  name: i,
                  is_notnull: data.fields[j].is_notnull,
                  field_type: data.fields[j].field_type,
                  is_system: data.fields[j].is_system,
                  cate_level: data.fields[j].cate_level
                    ? data.fields[j].cate_level
                    : 0,
                  label_yiji: data.fields[j].label_yiji
                });
                if (i == "area_name") {
                  this.setCity();
                }
                if (i == "sex" || i == "is_marriage") {
                  this.setSex();
                }
                this.expose = expose;
              }
            }
          }
        });
    },
    // 13中类型的跳转
    to(e) {
      // 1手机号 4单行输入（200个字符） 5多行输入 6单图
      // 2年月日 3年月日时分秒  7文字编辑器 8图文编辑器 9单选 10多选 11多级分类 13 地区
      console.log(e);
      if (e.field_type == 4) {
        this.$router.push({
          name: "setup-title",
          params: {
            type: e.name,
            value: e.value,
            title: e.title,
            notnull: e.is_notnull
          }
        });
      }
      if (e.field_type == 5) {
        this.$router.push({
          name: "setup-titles",
          params: {
            type: e.name,
            value: e.value,
            title: e.title,
            notnull: e.is_notnull
          }
        });
      }
      if (e.field_type == 2) {
        this.$router.push({
          name: "setup-setupnyr",
          params: {
            type: e.name,
            title: e.title,
            notnull: e.is_notnull,
            value: e.value
          }
        });
      }
      if (e.field_type == 3) {
        this.$router.push({
          name: "setup-setupnyrsfm",
          params: {
            type: e.name,
            title: e.title,
            notnull: e.is_notnull,
            value: e.value
          }
        });
      }
      if (e.field_type == 7) {
        this.$router.push({
          name: "setup-setuptext",
          params: {
            type: e.name,
            value: e.value,
            title: e.title,
            notnull: e.is_notnull
          }
        });
      }
      if (e.field_type == 8) {
        this.$router.push({
          name: "setup-setupfhtml",
          params: {
            type: e.name,
            value: e.value,
            title: e.title,
            notnull: e.is_notnull
          }
        });
      }
      if (e.field_type == 9) {
        this.$router.push({
          name: "setup-setupradio",
          params: {
            type: e.name,
            list: e.label_yiji,
            radio: e.value,
            title: e.title,
            notnull: e.is_notnull
          }
        });
      }
      if (e.field_type == 10) {
        this.$router.push({
          name: "setup-setupcheck",
          params: {
            type: e.name,
            list: e.label_yiji,
            check: e.value,
            title: e.title,
            notnull: e.is_notnull
          }
        });
      }
      if (e.field_type == 11) {
        this.$router.push({
          name: "setup-setupcomplex",
          params: {
            type: e.name,
            list: e.label_yiji,
            level: e.cate_level,
            title: e.title,
            notnull: e.is_notnull
          }
        });
      }
      if (e.field_type == 13) {
        this.$router.push({
          name: "setup-setupclass",
          params: {
            type: e.name,
            list: e.label_yiji,
            title: e.title,
            notnull: e.is_notnull
          }
        });
      }
    }
  }
};
</script>

<style scoped>
.iconfont {
  font-size: 0.28rem;
  color: #666;
}
.icon-you-copy {
  margin-left: 0.1rem;
}
.all_r {
  width: 70%;
  word-break: break-all;
  justify-content: flex-end;
}
</style>